<template>
  <div style="height: 542px" class="all">
    <div class="head">
      <div class="title">工单状态</div>
      <div class="pick">
        <el-date-picker
          class="datePicker"
          type="daterange"
          range-separator="~"
          :clearable="false"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          v-model="pickValue"
          @change="renderCharts"
        >
        </el-date-picker>
        <div class="toggle">
          <div
            class="toggleItem"
            @click="toggleType('week')"
            :class="{ isCheck: type === 'week' }"
          >
            周
          </div>
          <div
            class="toggleItem"
            @click="toggleType('month')"
            :class="{ isCheck: type === 'month' }"
          >
            月
          </div>
          <div
            class="toggleItem"
            @click="toggleType('year')"
            :class="{ isCheck: type === 'year' }"
          >
            年
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="empty" v-if="isEmpty">
        <el-empty
          image="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
          description="暂无数据"
        ></el-empty>
      </div>
      <div class="echart" v-else></div>
    </div>
  </div>
</template>

<script>
import { getCollectReport } from '@/api/person'
export default {
  props: ['today', 'weekStart', 'monthStart', 'yearStart'],
  data () {
    return {
      pickValue: '',
      type: 'week',
      isEmpty: true
    }
  },
  created () {
    this.pickValue = [this.weekStart, this.today]
    this.renderCharts()
  },
  methods: {
    // 切换周月年 归零
    toggleType (type) {
      this.type = type
      switch (type) {
        case 'week':
          this.pickValue = [this.weekStart, this.today]
          break
        case 'month':
          this.pickValue = [this.monthStart, this.today]
          break
        case 'year':
          this.pickValue = [this.yearStart, this.today]
          break
      }
      this.renderCharts()
    },
    // 渲染图表
    async renderCharts () {
      const res = await getCollectReport(...this.pickValue) // 返回的是空数组
      this.isEmpty = !res.length // 长度为0时isEmpty是true
    }
  }
}
</script>

<style scoped lang="scss">
.all {
  display: flex;
  flex-direction: column;
  .head {
    height: 34px;
    line-height: 34px;
    display: flex;
    justify-content: space-between;
    .title {
      color: #333;
      font-size: 16px;
      font-weight: 600;
    }
    .pick {
      display: flex;
      .datePicker {
        width: 230px;
        height: 32px;
        margin-right: 20px;
        // 内容显示再调整
        // line-height: 32px;
      }
      .toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 129px;
        height: 34px;
        background: rgba(233, 243, 255, 0.37);
        border-radius: 10px;
        .toggleItem {
          width: 37px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          font-size: 14px;
          color: #9ca3b4;
          cursor: pointer;
        }
        .isCheck {
          border-radius: 7px;
          font-weight: 600;
          color: #333;
          background-color: #fff;
          box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
        }
      }
    }
  }
  .el-date-editor{
    ::v-deep .el-range-separator{
      line-height: 24px;
    }
    ::v-deep .el-icon-date{
      line-height: 24px;
    }
  }
  .body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep img {
      width: 123px;
      height: 96px;
    }
    ::v-deep p {
      margin-top: 25px;
      color: #20232a;
      font-size: 14px;
    }
  }
}
</style>
